<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
var test = async_test("Ensure that adding animation events in the handler does not crash");

function touchElement(evt) {
    getComputedStyle(evt.srcElement.firstElementChild)['-webkit-animation-duration'];
    evt.srcElement.firstElementChild.style.display = 'block';
    total++;
    if (total == 500) {
        test.done();
    }
}

window.onload = test.step_func(() => {
    total = 0;
    var padding = document.getElementsByClassName("padding");
    for (var i = 0; i < padding.length; i++)
        padding[i].addEventListener('webkitAnimationIteration', test.step_func(touchElement), false, false);
});
</script>
<style>
@-webkit-keyframes keyframes {
    from { }
}

.crash {
    -webkit-animation-name: keyframes;
}

.padding {
    -webkit-animation-name: keyframes;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.001s;
}
</style>
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<div class="padding">
<img class="crash">
